<template>
    <div class="helpVue">
        <!-- 左边类别菜单 -->
        <div class="navLeft">
            <ul class="visualAngleList">
                <li v-for="(item,index) in visualAngleList" :key="index" :class="{active:item.title == vaClickIndex}" @click="clickItem(index,item)">{{item.title}}</li>
            </ul>
            <ul class="otherProblems">
                <li v-for="(item,index) in otherProblemsList" :key="index">
                    <p>{{item.title}}</p>
                    <ul class="itemUL" v-for="(items,indexs) in item.list" :key="indexs">
                        <li @click='clickItem(indexs,items)' :class="{active:items.title == vaClickIndex}">{{items.title}}</li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- 右边内容 -->
        <div class="contentRight">
            <component  @tohelpDetails="tohelpDetails" @backHistory="backHistory" :detailData="detailsList" :is="tempType" :backtempType="tempType" :list='tempType == "help-Video"? videoData:textList'></component>
        </div>
    </div>
</template>
<script>
var adminCon = require('@/assets/images/help/adminCon.png');
var warehouseCon = require('@/assets/images/help/warehouseCon.png');
var businessCon = require('@/assets/images/help/businessCon.png');
var jurisdictionCon = require('@/assets/images/help/jurisdictionCon.png');

var applicationManCon = require('@/assets/images/help/applicationManCon.png');
var batchImportCon = require('@/assets/images/help/batchImportCon.png');
var ConsumablesManCon = require('@/assets/images/help/ConsumablesManCon.png');
var godownKeeperCon = require('@/assets/images/help/godownKeeperCon.png');
var InventoryManCon = require('@/assets/images/help/InventoryManCon.png');
var InventoryWarninngCon = require('@/assets/images/help/InventoryWarninngCon.png');
var maintenanceCon = require('@/assets/images/help/maintenanceCon.png');
var NewConsumablesCon = require('@/assets/images/help/NewConsumablesCon.png');
var QRCodeManCon = require('@/assets/images/help/QRCodeManCon.png');
var QRCodePrintCon = require('@/assets/images/help/QRCodePrintCon.png');
var maintenanceManCon = require('@/assets/images/help/maintenanceManCon.png');

var assetCollectionCon = require('@/assets/images/help/assetCollectionCon.png');
var assetRepair = require('@/assets/images/help/assetRepair.png');
var employeeUseCon = require('@/assets/images/help/employeeUseCon.png');
var reportLossCon = require('@/assets/images/help/reportLossCon.png');
var reportReturnCon = require('@/assets/images/help/reportReturnCon.png');
var reportTransferCon = require('@/assets/images/help/reportTransferCon.png');
var assetInvenoryCon = require('@/assets/images/help/assetInvenoryCon.png');

var RepairmanOpeartionCon = require('@/assets/images/help/RepairmanOpeartionCon.png');


var PermissionConfiguration = require('@/assets/images/help/ConfigurationImg/PermissionConfiguration.png');
var operationFlow = require('@/assets/images/help/ConfigurationImg/operationFlow.png');
var WarehouseConfiguration1 = require('@/assets/images/help/ConfigurationImg/WarehouseConfiguration1.png');
var WarehouseConfiguration2 = require('@/assets/images/help/ConfigurationImg/WarehouseConfiguration2.png');

var CollectionProcessOfAssetsAndConsumables = require('@/assets/images/help/ConfigurationImg/CollectionProcessOfAssetsAndConsumables.png');
var ReturnAndLossEportingProcessOfAssetsAndConsumables = require('@/assets/images/help/ConfigurationImg/ReturnAndLossEportingProcessOfAssetsAndConsumables.png');
var AssetTransferProcess = require('@/assets/images/help/ConfigurationImg/AssetTransferProcess.png');

var notice = require('@/assets/images/help/ConfigurationImg/notice.png');


export default {
    name: "helpVue",
    components:{ 
        helpVideo : resolve => { require(['@/components/helpVideo/index'], resolve) },
        textList : resolve => { require(['@/components/helpVideo/list'], resolve) },
        helpDetails : resolve => { require(['@/components/helpVideo/helpDetails'], resolve) }
    },
    data() {
        return{
            // 管理员视角数据
            tempType:'help-Video',
            vaClickIndex:'',
            videoData:[],
            textList:[],
            detailsList: [],
            visualAngleList:[
                {title:'管理员视角',details:[
                    {
                        title:'主管理员视角',
                        grade:1,
                        select: true,
                        outerContent: [
                             {
                                detailName:'主管理员操作流程',
                                detailText:`主管理员的操作流程`,
                                bg: `<img class="bgimg" src="${adminCon}">`,
                                stepMsg: [
                                     {step:'第一步',stepTitle:'权限配置',content: `<div>权限配置已经进行了优化，您只需要根据需要绑定人员即可。无特殊需求默认即可。</div>`},
                                     {step:'第二步',stepTitle:'仓库配置',content: `<div>仓库配置设计的比较灵活，主要是为了适应更多的应用场景，具体的仓库配置，请查看主管理员视角里面的【仓库配置】视频教程。仓库配置就是要给每个仓库绑定仓库管理员，由仓库管理员来管理当前仓库。</div>`},
                                     {step:'第三步',stepTitle:'审批权限',content: `<div>目前版本我们只将资产领用和耗材领用接入了钉钉审批，后期我们将根据需要把更多的申请接入钉钉审批。主管理员只需到钉钉官方后台审批里面找到【企业资产领用】和【企业耗材领用】进入设置审批流程即可。这里的审批流程设置和钉钉其他审批设置流程是一样的。</div>`},
                                     {step:'第四步',stepTitle:'查看数据报表',content: `
                                              <div>我们将数据报表分为三大类：个人数据报表、部门数据报表、公司数据报表。每个仓库会对应一套报表数据。</div>
                                              <div>个人报表：员工个人查询自己的资产和耗材数据报表；</div>
                                              <div>部门报表：反应部门资产和耗材使用数据的报表。</div>
                                              <div>公司报表：查看所有仓库的数据报表</div>
                                      `},
                                ]
                              },
                             {
                                detailName:'权限配置',
                                detailText:`系统相关角色权限配置`,
                                bg: `<img class="bgimg" src="${jurisdictionCon}">`,
                                imgAndMsg: [
                                     {
                                       img: `<img class="imgAndMsg" src="${PermissionConfiguration}">`,
                                       content: `
                                          <div>应用只有5种权限角色：主管理员、仓库管理员、维修员、员工、公司报表</div>
                                          <div><b>主管理员：</b>拥有最高权限，并且跟随钉钉主管理员更换而更换。</div>   
                                          <div><b>仓库管理员：</b>仓库管理员是由主管理员指定的。仓库管理员管理仓库的资产版块和耗材版块。</div>   
                                          <div><b>维修员：</b>仓库管理员新建本仓库的维修部门、并指定维修员。维修员接收维修申请，并处理维修申请。</div>   
                                          <div><b>员工：</b>全体成员都拥有的基本权限：【我的资产】【我的耗材】【部门资产】【部门耗材】【资产领用】【耗材领用】【帮助】（可查看名词解释）。可以个人我的资产和部门资产进行：报修、转移、退还、报失、盘点等操作。</div>   
                                          <div><b>公司报表：</b>只有主管理员指定的成员才有权限查看全公司的资产和耗材数据报表。</div>   
                                        `
                                    }
                                   ]
                              },
                            {
                               detailName:'业务流程',
                               detailText:`整体业务流程图`,
                               bg: `<img class="bgimg" src="${businessCon}">`,
                               imgAndMsg: [
                                    {
                                      img: `<img class="imgAndMsg" src="${operationFlow}">`,
                                      content: ``
                                   }
                                  ]
                             },
                            {
                               detailName:'仓库配置',
                               detailText:`如何配置仓库`,
                               bg: `<img class="bgimg" src="${warehouseCon}">`,
                               imgAndMsg: [
                                    {
                                      video: 'showVideo',
                                      content: `
                                          <div>仓库配置，是配置线上仓库，可线上单独使用，也可和线下实体仓库结合使用。可以单仓库运用，也可以多仓库应用。</div>
                                          <div>仓库之间的数据是独立的，每个仓库都有资产版块和耗材版块，资产版块和耗材版块可分别绑定不同的使用部门。</div>
                                       `
                                   },
                                   {
                                      img: `<img class="imgAndMsg" src="${WarehouseConfiguration1}">`,
                                      content: `
                                         <div>仓库场景一：</div>
                                         <div>不新增仓库的情况下，默认仓库的资产板块和耗材板块默认绑定全部部门。</div>   
                                         <div>比如新增了A仓库，并对A仓库的资产板块和耗材板块都分别绑定了部门，这时就要对默认仓库的资产板块和耗材板块重新进行绑定部门。</div>   
                                         <div> 这是又新增了B仓库，并对B仓库的资产板块和耗材板块也分别绑定了部门。但这时B仓库的资产板块多绑定了部门5，其结果就是部门5的员工及其子部门的员工可以同时使用A仓库的资产板块和耗材板块，也可以使用B仓库的资产板块。</div>   
                                       `
                                   },
                                   {
                                      img: `<img class="imgAndMsg" src="${WarehouseConfiguration2}">`,
                                      content: `
                                         <div>仓库配置二：资产板块分开配置使用，全公司试用一个耗材仓库。</div>
                                         <div>比如我们先配置对多个仓库：总仓库、A仓库、B仓库</div>   
                                         <div>这时将这三个仓库的资产版块分别绑定不同部门使用。将总仓库的耗材版块绑定全部部门；A仓库和B仓库的耗材版块不绑定任务部门。</div>   
                                         <div>这样设定后，各个部门使用各自仓库的资产板块；但大家都同时使用总仓库的耗材版块。</div>
                                         <div>这样设定的优势是：可能各个部门需要单独管理自己的资产，但对于办公耗材类的由总仓库统一 采购，全员统一领用，这样有利于降低办公耗材的采购成本。</div>
                                       `
                                   },
                                   {
                                      content: `
                                         <div>综合：仓库的资产版块和耗材版块分别绑定不同的使用部门的这种灵活方式，有助于企业实现特俗的业务场景。</div>
                                       `
                                   }
                                  ]
                             }
						]
                    }
                ]},
                {
                   title:'仓库管理员视角',details:[
                        {
                            title:'资产的管理',
                            select: true,
                            grade:2,
                            outerContent: [
                                 {
                                    detailName:'仓库管理员操作流程',
                                    detailText:`仓库管理员的操作流程`,
                                    bg: `<img class="bgimg" src="${godownKeeperCon}">`,
                                    stepMsg: [
                                        {step:'第一步',stepTitle:'关于仓库',content: `
                                                 <div>如果您只负责一个仓库管理，您在进行资产管理和耗材管理的时候，不需要选择仓库。</div>
                                                 <div>如果您负责多个仓库的管理，您在进行资产管理和耗材管理的时候，一定要注意选择仓库，有时候看似一样操作，可能是在不同仓库中进行的。每个仓库的数据是独立的。</div>
                                              `
                                        },
                                        {step:'第二步',stepTitle:'资产分类和耗材分类',content: `
                                                 <div>在管理资产和耗材的时候，首选要添加资产和耗材的分类。</div>
                                                 <div>目前所有分类只支持二级分类；并且所有资产和耗材都只能放在二级分类下面。</div>
										`},
                                        {step:'第三步',stepTitle:'资产的单个录入',content: `<div>资产的单个录入比较简单，根据您需要的内容填写就可以。后期我们将支持资产和耗材参数的自定义。</div>`},
                                        {step:'第四步',stepTitle:'资产的批量录入',content: `
                                                 <div>在做资产批量导入的时候，请先去查看我们的<span style="color: #18AEFE;">名词解释</span>。</div>
                                                 <div>资产批量导入前，先要选择好仓库，匹配仓库的分类。还要弄清楚资产的归属问题。更多内容请查看仓库管理员视角的视频教程。</div>
                                        `},
                                        {step:'第五步',stepTitle:'耗材的录入',content: `
                                                 <div>耗材的录入相对来说比较简单，目前只支持的那个录入，后期我们将增加耗材的批量录入。</div>
                                              `
                                        },
                                        {step:'第六步',stepTitle:'处理资产和耗材的各类申请',content: `
                                                 <div>作为仓库管理员需要及时处理来自员工的资产领用申请、资产转移申请、资产退还申请、资产报失申请、耗材领用申请。对资产和耗材的领用申请要及时进行确认，并发放资产和耗材。具体的操作方法请查阅：仓库管理员视角的【申请管理】。</div>
                                        `},
                                        {step:'第七步',stepTitle:'设置维修部门',content: `<div>作为仓库管理员可以为您管理的仓库设置多个维修部门，维修部门绑定不同的资产分类，并指定维修员。比如：您设置了两个维修部门，一个IT设备维修部门，绑定了IT资产分类；一个水电维修部门，绑定了水电的资产分类。当员工提交资产报修的时候，系统会根据资产的分类将报修信息发给不同维修员。详细设置请查阅：仓库管理员视角的【维修部门管理】。</div>`},
                                        {step:'第八步',stepTitle:'查看数据报表',content: `
                                                 <div>我们将数据报表分为三大类：个人数据报表、部门数据报表、公司数据报表。每个仓库会对应一套报表数据。</div>
                                                 <div>个人报表：员工个人查询自己的资产和耗材数据报表；</div>
                                                 <div>部门报表：反应部门资产和耗材使用数据的报表。</div>
                                                 <div>仓库表表：每个仓库的独立数据报表。</div>
                                                 <div> 公司报表：查看所管理仓库的数据报表</div>
                                         `},
                                   ]
                                  },
                                 {
                                    detailName:'资产批量导入',
                                    detailText:`资产批量导入需要注意的地方`,
                                    bg: `<img class="bgimg" src="${batchImportCon}">`, 
                                    imgAndMsg: [
                                         {
                                           video: 'showVideo',
                                           content: `
                                               <div>批量资产导入需要注意的地方：</div>
                                               <div>1，填写资产分类的时候是填写资产的二级分类。</div>
                                               <div>2，使用部门和使用人的填写要求：</div>
                                               <div style="text-indent: 2em;">①如果该资产是<span style="color: #FA8C8E;">员工在使用</span>，即个人使用，使用部门和使用人都要填写；</div>
                                               <div style="text-indent: 2em;">②如果该资产是<span style="color: #FA8C8E;">部门在使用</span>，，即部门使用，只需填写使用部门名称即可，使用人不用填写；</div>
                                               <div style="text-indent: 2em;">③如果该资产是<span style="color: #FA8C8E;">闲置资产</span>，，则使用部门和使用人都不用填写。</div>
										   `,
                                        }
                                       ]
                                  },
                                 {
                                    detailName:'申请管理',
                                    detailText:`各类申请流程`,
                                    bg: `<img class="bgimg" src="${applicationManCon}">`,
                                    imgAndMsg: [
                                         {
                                           video: 'showVideo',
                                           content: `
                                               <div>仓库管理员需要处理的申请有：资产领用申请、耗材领用申请、资产转移申请、资产退还申请、资产报失申请。</div>
                                            `
                                        },
                                        {
                                           img: `<img class="imgAndMsg" src="${CollectionProcessOfAssetsAndConsumables}">`,
                                           content: `
                                              <div>员工发起领用申请，自动进入审批流程，当审批通过后，系统发工作通知给仓库管理员；需要仓库管理员进入资产管理页面进行确认，并发放资产。</div>   
                                            `
                                        },
                                        {
                                           img: `<img class="imgAndMsg" src="${ReturnAndLossEportingProcessOfAssetsAndConsumables}">`,
                                           content: `
                                              <div>员工发起资产退还或报失申请；系统发工作通知给仓库管理员。如是资产退还，仓库管理员需要先确认资产已经收回，才能在系统上确认。如果是资产报失，仓库管理员需要查明丢失原因，并在系统上确认，资产进入报失状态。</div>
                                            `
                                        },
                                        {
                                           img: `<img class="imgAndMsg" src="${AssetTransferProcess}">`,
                                           content: `
                                              <div>员工发起资产转移，需员工之间先协商好，发起转移。发起人申请，接收人统一，最后由管理员进行确认，流程完成。</div>
                                            `
                                        },
                                    ]
                                 },
                                 {
                                    detailName:'二维码管理',
                                    detailText:`资产二维码管理`,
                                    bg: `<img class="bgimg" src="${QRCodeManCon}">`,
                                    imgAndMsg: [
                                         {
                                           video: 'showVideo',
                                           content: `
                                               <div>目前二维码支持两种尺寸，80mm x 40mm  60mm x 30mm</div>
                                               <div>二维码需要先下载，我们支持直接下载pdf文档，在用PDF文档打印即可。</div>
                                            `
                                        },
                                        {
                                           content: `
                                              <div>二维码logo图片请用黑白图片，且不用带复杂，是热转印打印，太复杂的logo会打印的不是很清晰。</div>   
                                            `
                                        }
                                    ]
                                  },
                                {
                                   detailName:'盘点管理',
                                   detailText:`如何发起盘点任务`,
                                   bg: `<img class="bgimg" src="${InventoryManCon}">`,
                                   imgAndMsg: [
                                        {
                                          video: 'showVideo',
                                          content: `
                                              <div>要替换文字，仓库管理员管理当前仓库的资产和耗材。负责录入和管理资产和耗材，设置当前仓库的维修管理员。审核、发放员工的资产领用、耗材领用、转移申请、转移申请、退还申请等。仓库管理员主要操作还是在钉钉pc客户端，请登录钉钉PC客户端。</div>
                                           `
                                       }
                                   ]
                                 },
                                {
                                   detailName:'维修部门管理',
                                   detailText:`怎么创建本仓库的维修部门`,
                                   bg: `<img class="bgimg" src="${maintenanceManCon}">`,
                                   imgAndMsg: [
                                        {
                                          video: 'showVideo',
                                          content: `
                                              <div>要替换文字，仓库管理员管理当前仓库的资产和耗材。负责录入和管理资产和耗材，设置当前仓库的维修管理员。审核、发放员工的资产领用、耗材领用、转移申请、转移申请、退还申请等。仓库管理员主要操作还是在钉钉pc客户端，请登录钉钉PC客户端。</div>
                                           `
                                       }
                                   ]
                                 },
                                {
                                   detailName:'二维码打印',
                                   detailText:`二维码打印硬件及流程`,
                                   bg: `<img class="bgimg" src="${QRCodePrintCon}">`,
                                   imgAndMsg: [
                                       {
                                          content: `
                                             <div>打印设备推荐：佳博GP9025T碳带条码机，</div>
                                             <div>色带：树脂碳带 尺寸：90mm宽 色带的长度不定，每家生产的不同，一般为300米</div>
                                             <div>标签纸：哑银纸PET防水贴纸 尺寸：80mm X 40mm （我们推荐的标签是这个尺寸）</div>
                                             <div>打印机的使用方法请咨询购买的厂家，告诉打印机厂家是打印pdf格式文件的。</div>
                                          `
                                       },
                                       {
                                         content: `
                                           <div>打印步骤：<div>
                                           <div>1，先下载二维码，可按分类下载、单个下载、批量下载；下载后就是PDF格式文件。</div>
                                           <div>2，打印机连上电脑。</div>
                                           <div>3，测试打印。</div>
                                       `
                                       },
                                   ]
                                 }
                            ]
                        },
                        {
                            title:'耗材的管理',
                            select: true,
                            outerContent: [
                                 {
                                    detailName:'耗材管理',
                                    detailText:`仓库管理员如何管理耗材版块`,
                                    bg: `<img class="bgimg" src="${ConsumablesManCon}">`,
                                    imgAndMsg: [
                                         {
                                           video: 'showVideo',
                                           content: `
                                               <div>仓库管理员管理当前仓库的资产，设置当前仓库的维修管理员。审核、发放员工的资产领用、转移申请、报失申请、退还申请、退还申请等。仓库管理员主要操作还是在钉钉pc客户端，请登录钉钉PC客户端。</div>
                                            `
                                        }
                                    ]
                                  },
                                  {
                                     detailName:'耗材新增',
                                     detailText:`如何新增耗材`,
                                     bg: `<img class="bgimg" src="${NewConsumablesCon}">`,
                                     imgAndMsg: [
                                          {
                                            video: 'showVideo',
                                            content: ``
                                         }
                                     ]
                                   },
                                 {
                                    detailName:'库存预警',
                                    detailText:`库存预警的操作`,
                                    bg: `<img class="bgimg" src="${InventoryWarninngCon}">`,
                                    imgAndMsg: [
                                         {
                                           video: 'showVideo',
                                           content: `
                                               <div>每件耗材设置库存下限，当库存低于库存下限后，系统会发工作通知给仓库管理员。</div>
                                            `
                                        }
                                    ]
                                  }
                            ],
                           grade:2,
                        }
                    ]
                },
                {
                    title:'维修管理员视角',details:[
                        {
                            title:'维修管理员视角',
                            grade:3,
                            select: true,
                            outerContent: [
                                 {
                                    detailName:'维修员操作',
                                    detailText:`维修员的操作流程`,
                                    bg: `<img class="bgimg" src="${RepairmanOpeartionCon}">`,
                                    imgAndMsg: [
                                         {
                                           video: 'showVideo',
                                           content: `
                                               <div>1、接收维修任务；</div>
                                               <div>2、确认维修任务；</div>
                                               <div>3、上传维修记录，即可结束维修任务。</div>
                                            `
                                        },
                                     ]
                                  }
                            ]
                        }
                   ]
                },
                {
                    title:'员工视角',details:[
                        {
                            title:'员工视角',
                            grade:4, 
                            select: true,
                            outerContent: [
                                 {
                                    detailName:'员工使用流程',
                                    detailText:`员工如何使用应用概况`,
                                    bg: `<img class="bgimg" src="${employeeUseCon}">`,
                                    stepMsg: [
                                         {step:'第一步',stepTitle:'请先查看名词解释',content: `
                                                  <div>您需要查看<span style="color: #18AEFE;">名词解释</span>，了解清楚【我的资产】【我的耗材】【部门资产】【部门耗材】【个人使用】【部门使用】等名词的定义。怎么区分我的资产和部门资产、我的耗材和部门耗材。</div>
                                               `
                                         },
                                         {step:'第二步',stepTitle:'资产和耗材的领用',content: `
                                                  <div>根据需要选择你需要领用的资产和耗材。在领用页面特别要注意区分使用方式，选对个人使用、还是部门使用。如果选择个人使用，资产或耗材则归属在我的资产或我的耗材里面。</div>
                                                  <div>如果选择部门使用，资产或耗材则归属在部门资产或部门耗材里面。部门资产或耗材是归属在部门名下的，所有部门成员都能查看和操作。</div>
                                    										`},
                                         {step:'第三步',stepTitle:'我的资产---资产的报修、转移、退还、报失',content: `<div>归您个人使用的资产，资产的报修、转移、退还、报失等都由您个人操作。</div>`},
                                         {step:'第四步',stepTitle:'部门资产---资产的报修、转移、退还、报失',content: `
                                                  <div>部门资产是部门成员共用的资产，部门成员都可以进行领用、报修、转移、退还、报失、盘点等操作。</div>
                                         `},
                                         {step:'第五步',stepTitle:'资产盘点',content: `
                                                  <div>当员工收到盘点任务后，</div>
                                               `
                                         }
                                    ]
                                  },
                                  {
                                     detailName:'资产、耗材的领用',
                                     detailText:`员工如何领用资产和耗材`,
                                     bg: `<img class="bgimg" src="${assetCollectionCon}">`,
                                      imgAndMsg: [
                                        {
                                          video: 'showVideo',
                                          content: `
                                                 <div>领用为个人资产：指的是当前领用的资产为个人专用，例如：笔记本电脑、电脑主机、显示器。</div>
                                                 <div>领用为个人耗材：指的是当前领用的耗材为个人专用，例如：笔、本。</div>
                                                 <div>领用为部门共用资产：指的是当前资产为部门成员共用的资产。</div>
                                                 <div>领用为部门共用耗材：指的是当前耗材为部门成员共用的耗材。</div>
                                            `
                                        }
                                      ]
                                   },
                                 {
                                    detailName:'资产报修',
                                    detailText:`资产如何报修`,
                                    bg: `<img class="bgimg" src="${assetRepair}">`,
                                    imgAndMsg: [
                                      {
                                        video: 'showVideo',
                                        content: `
                                               <div>1、员工发起报修申请。</div>
                                               <div>2、仓库管理员收到维修工作通知，并确认。</div>
                                               <div>3、员工收到维修管理员确认工作通知。</div>
                                               <div>4、维修管理员线下完成维修任务。</div>
                                               <div>5、维修管理员上传维修费用、描述、图片等。</div>
                                               <div>6、维修记录上传后维修任务结束。</div>
                                          `
                                      },
                                    ]
                                  },
                                 {
                                    detailName:'资产转移',
                                    detailText:`资产如何转移`,
                                    bg: `<img class="bgimg" src="${reportTransferCon}">`,
                                    imgAndMsg: [
                                      {
                                        video: 'showVideo',
                                        content: `
                                               <div>1、员工发起转移，选择接收同事或接收部门。</div>
                                               <div>2、接收人收到转移工作通知，在应用里面确认接收。</div>
                                               <div>3、仓库管理员接收到转移工作通知，并确认。</div>
                                               <div>4、转移流程完成。</div>
                                          `
                                      },
                                    ]
                                  },
                                  {
                                     detailName:'资产退还',
                                     detailText:`资产如何退还`,
                                     bg: `<img class="bgimg" src="${reportReturnCon}">`,
                                     imgAndMsg: [
                                       {
                                         video: 'showVideo',
                                         content: `
                                                <div>1、员工发起退还申请，并将资产交还给仓库管理员。</div>
                                                <div>2、仓库管理员接收资产，并在应用里面确认。</div>
                                                <div>3、完成资产退还流程。</div>
                                           `
                                       }
                                     ]
                                   },
                                 {
                                    detailName:'资产报失',
                                    detailText:`资产如何报失`,
                                    bg: `<img class="bgimg" src="${reportLossCon}">`,
                                    imgAndMsg: [
                                      {
                                        video: 'showVideo',
                                        content: `
                                               <div>1、员工对丢失资产发起报失。</div>
                                               <div>2、仓库管理员线下核对情况。</div>
                                               <div>3、仓库管理员在应用里确认，完成报失流程。</div>
                                               <div> 4、资产进入报失状态。</div>
                                          `
                                      }
                                    ]
                                  },
                                 {
                                    detailName:'资产盘点',
                                    detailText:`员工如何完成盘点任务`,
                                    bg: `<img class="bgimg" src="${assetInvenoryCon}">`,
                                    imgAndMsg: [
                                      {
                                        video: 'showVideo',
                                        content: ``
                                      }
                                    ]
                                  },
                                  
                            ],
                        }
                   ]
                }
            ],
            otherProblemsList:[
                {
                    title:'常见问题',
                    list:[
                        {
                            title:'名词解释',
                            list:{
                                   headerTitle: '名词解释',
                                   innerContent: [
                                          {
                                              title:'我的资产',
                                              content: `
                                                 <div>使用方式为【个人使用】的资产归属【我的资产】，属员工个人专用。比如：电脑设备、办公桌椅等其他个人专用物品。领用后在【我的资产】里查询记录。</div>
                                                `
                                          },
                                          {
                                              title:'我的耗材',
                                              content: `
                                                 <div>使用方式为【个人使用】的耗材归属【我的耗材】，属员工个人专用。比如员工领用的：纸笔本、等其他个人专用物品。领用后在【我的耗材】里查询记录。</div>
                                                `
                                          },
                                         {
                                             title:'部门资产',
                                             content: `
                                                <div>使用方式为【部门使用】的资产归属【部门资产】，部门成员共同使用。比如：打印机、会议设备、投影仪、办公设备、会议桌椅等。领用后在【部门资产】里查询记录。</div>
                                               `
                                         },
                                         {
                                             title:'部门耗材',
                                             content: `
                                                <div>使用方式为【部门使用】的耗材归属【部门耗材】，部门成员共同使用。比如：打印纸、纸巾、纸杯等。领用后在【部门耗材】里查询记录。</div>
                                               `
                                         },
                                         {
                                             title:'使用方式',
                                             content: `
                                                <div>资产的使用方式只有两种：个人使用、部门使用；</div>
                                                <div>个人使用：资产和耗材归员工个人使用的定义为个人使用，个人使用包含【我的资产】【我的耗材】</div>
                                                <div>部门使用：资产和耗材归属部门成员共同使用的定义为部门使用；部门使用包含【部门资产】和【部门耗材】</div>
                                               `
                                         },
                                         {
                                             title:'资产的四种状态',
                                             content: `
                                                <div>闲置状态：资产录入后没有员工或部门领用，则为闲置状态。  在用状态：资产录入后由部门或员工领用后则为在用状态；</div>
                                                <div>报修状态：员工或部门名下的资产提交报修后，则为报修状态，当维修完成后，报修状态结束。报废状态：指资产由仓库管理员进行报废操作后的状态。</div>
                                               `
                                         },
                                         {
                                             title:'资产转移',
                                             content: `
                                                <div>资产转移是指资产在使用者之间转移。比如A员工使用完A资产后，可以根据工作需要将资产转移给另外要给同事使用。</div>
                                               `
                                         }
                                      ]
                                }
                        },
                        {
                            title:'关于收费模式',
                            list:{
                                   headerTitle: '关于收费模式',
                                   innerContent: [
                                          {
                                              content: `
                                                 <div>使用越界资产：不限资产数量、不限耗材数量、不限仓库数量，您放开了使用。</div>
                                                `
                                          },
                                          {
                                              content: `
                                                 <div style="color:#F90505; margin-bottom:5px;font-weight:550;">一，按通讯录人数收费模式</div>
							                     <div>我们的设计思路是从企业资产采购、管理、使用、维护、回收等全生命周期来设计业务流程，全面实现企业资产线上采购、入库、分发、领用、报修、转移、退还、盘点、回收、处置等功能。从而实现企业资产管理业务的全部在线化管理。以提高资产利用率、减少闲置浪费、优化资产管理流程、提升资产管理效率，从而降低企业运营成本。</div>
							                     <div>通过对资产全生命周期的管理，产生个人数据报表、部门数据报表、仓库数据报表、公司数据报表，为企业管理决策、资产合理调配提供全方位的数据支持。</div>
                                                 <div>其主要设计思想实现企业资产管理全员参与，谁领用、谁保管，谁维护、谁盘点的原则，有效理清人与物的关系。从而提升员工参与感、责任感。因此，我们制定的收费标准是按照企业通讯录的人数来收费，但是不限资产数量、不限耗材数量、不限新建仓库数量。</div>
                                              `
                                          },
                                          {
                                              content: `
                                                 <div style="color:#F90505; margin-bottom:5px;font-weight:550;">二，按使用人数收费模式</div>
                                                 <div>有些企业在实际企业资产管理过程中，可能不需要全员参与管理，他们只需要有个资产管理员录入和登记资产就行。因此我们设计了更灵活的付费方式：按使用人数收费，但这个收费模式稍微有点限制。</div>
                                                 <div>举个例子说明：</div>
											     <div>1，企业有100名员工，只购买最低版本：1-20人的版本。</div>
											     <div>2， 这时登录钉钉官方后台，找到越界资产应用、点击设置，在设置页面选择可见范围。如果不设置可见范围，应用会自动获取通讯录的全部人数和购买的版本进行匹配，当人数不匹配的时候，会提示进不了应用。所以需要你设置可见范围。</div>
											     <div style="margin-bottom: 30px">3，可见范围的人数包括你选择的部门及其子部门的人数总和。这个总和小于等于20人，就可以正常使用。如果总和等于大于21人，则进不了系统，会提示系统版本不对，需要升级版本。这时你只需要将可见范围的人数降低到20人以下即可。</div>
											     <div>4，选择按人数收费的限制</div>
											     <div>如果选择按人数收费的模式，一定要设置可见范围，可见范围以外的员工和部门将无法使用应用，因为他们根本看不见应用图标。同时，资产管理员也无法下发资产给可见范围以外的部门和员工。所以这个模式只适合那些只需要记录资产数量的企业。且这个限制不是来自于我们应用，是来自于钉钉，因为你设置了可见范围之后，可见范围之外的人和部门，钉钉官方是不给我们授权的，所以我们应用是无法获取到您授权以外的组织部门和员工信息的。因为授权以外的人无法使用应用。解除这个限制也简单，根据企业通讯录的人数购买对应的版本，在设置可见范围的时候选择全部员工即可。</div>
                                              `
                                          },
                                          {
                                            content: `
                                              <div style="color:#F90505; margin-bottom:5px;font-weight:550;">三，学校使用时企业通讯录人数问题</div>
                                              <div>学校一般用的都是家校版钉钉，家校版的钉钉有两个通讯录：内部通讯录管理和家校通讯录。您在安装应用后，我们是按照员工通讯录的人数来进行匹配的，所以学校使用只需要按照员工通讯录的人数来购买版本就行了。</div>
                                              <div>但有些学校没有将员工通讯录和家校通讯录分开，安装应用后就会提示应用版本不对。这时只需要将你们学校的通讯录分开即可。</div>
                                           `
                                         }
                                      ]
                                }
                        },
                        {
                            title:'钉钉工作通知',
                            list:{
                                   headerTitle: '钉钉工作通知',
                                   innerContent: [
                                          {
                                              title: `领用申请通知`
                                          }, 
                                          {
                                              img: `<img class="navImg" src="${notice}">`,
                                              content: `
                                                 <div style="margin-top: 15px">第一条：申请人领用后发送给申请的审批结果通知。</div>
                                                 <div>第二条：当领用审批通过后，发给仓库管理员的通知。</div>
                                                 <div>第三条：当仓库管理员在系统后天确认后，发给你申请人的通知。</div>
                                                 <div>第四条：当员工申请报修后，发给维修员的钉钉工作通知。</div>
                                               `
                                          }
                                      ]
                                }
                        },
                        {
                            title:'本地化部署',
                            list:{
                                   headerTitle: '本地化部署',
                                   innerContent: [
                                          {
                                              content: `
                                                 <div>企业有特殊的业务需求，在现有基础上无法满足的情况下可以为企业实施本地化部署，在本地化部署的基础上进行定制开发。</div>
                                                 <div>本地化部署相当于企业自建应用，但服务器、源代码属于越界科技公司。</div>
                                               `
                                          }, 
                                          {
                                              content: `
                                                 <div>本地化部署的费用除了使用年费，还有服务器的费用、功能定制开发的费用。</div>
                                                 <div>年费就按照我们在钉钉市场上公布的年费收取；服务器的费用是按照在阿里云购买的费用，服务器的费用可以直接付给阿里云；功能定制开发的费用，根据功能需求评估费用。</div>
                                               `
                                          }
                                      ]
                                }
                        }
                    ]
                    },
                {
                    title:'关于报表',
                    list:[
                        {
                            title:'个人数据报表解读',
                            details:[
                               {
                                   title:'个人数据报表解读',
                                   video:'',
                                   detailName:'',
                                   detailText:`<div>请等待，将在下一个版本更新！</div>`
                               }
                           ]
                        },
                        {
                            title:'部门数据报表解读',
                           details:[
                               {
                                   title:'部门数据报表解读',
                                   video:'',
                                   detailName:'',
                                   detailText:`<div>请等待，将在下一个版本更新！</div>`
                               }
                           ]
                        },
                        {
                            title:'仓库数据报表解读',
                            details:[
                                {
                                    title:'仓库数据报表解读',
                                    video:'',
                                    detailName:'',
                                    detailText:`<div>请等待，将在下一个版本更新！</div>`
                                }
                            ]
                        },
                        {
                            title:'公司数据报表解读',
                            details:[
                                {
                                    title:'公司数据报表解读',
                                    video:'',
                                    detailName:'',
                                    detailText:`<div>请等待，将在下一个版本更新！</div>`
                                }
                            ]
                        }
                    ]
                },
                {
                    title:'其它',
                    list:[
                        {
                            title:'如何申请发票',
                            details:[
                                {
                                    title:'如何申请发票',
                                    video:'',
                                    detailName:'',
                                    detailText:`<div>请等待，将在下一个版本更新！</div>`
                                }
                            ]
                        },
                        {
                            title:'如何联系人工客服',
                            details:[
                                {
                                    title:'如何联系人工客服',
                                    video:'',
                                    detailName:'',
                                    detailText:`
                                        <div>安装应用后，我们会为每个企业拉一个服务群，请企业的管理员将操作越界资产管理的同事拉入服务群，我们将在服务群里面统一为大家服务。</div>
                                        <div>有的企业在安装前已经建立了服务群的，也请将需要操作应用的同事拉入群里。</div>
                                          `
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    },
    created(){
       //默认初始页面数据
       this.videoData.push(this.visualAngleList[0].details[0])
       this.vaClickIndex = this.visualAngleList[0].title
    },
    mounted(){
    },
    methods: {
        clickItem(index,item,type){
           this.vaClickIndex = item.title
           if(item.list != undefined){
            this.tempType = 'text-List'
            this.textList = item.list
           }else{
               this.tempType = 'help-Video'
               this.videoData = [...item.details]
          }
      },
      tohelpDetails(item) {
           this.tempType = 'help-Details'
           this.detailsList = item;
        },
       backHistory(item){
          this.tempType = 'help-Video'
        }
    }
}
</script>

<style lang="stylus">
.helpVue
    overflow hidden
    display flex
    height: 100%;
    .navLeft
        width 204px
        overflow scroll
        background-color #fff
        margin-right 10px
        padding 28px 0 0 0
        .visualAngleList
           width 143px
           overflow hidden
           margin 0 auto
           border-bottom 1px solid rgba(245, 245, 245, 1)
           padding-bottom 11px
           li
                width 100%
                height 30px
                background-color #f0f0f0
                border-radius 4px
                margin-bottom 12px
                text-align center
                line-height 30px
                font-size 12px
                color #6A6A6A
                cursor pointer
            .active
                background-color rgba(24, 144, 254, 1)
                color  rgba(255, 255, 255, 1)
        .otherProblems 
            width 143px
            overflow hidden
            margin 11px auto 0
            > li
               width 143px 
               overflow hidden
               cursor pointer
               > p
                  color rgba(172, 172, 172, 1)
                  font-size 14px
                  height 38px
                  line-height 38px
               > .itemUL
                  width 143px 
                  overflow hidden
                  > li
                    width 143px 
                    height 38px
                    line-height 38px
                    font-size 12px
                    color rgba(16, 16, 16, 1)
                    cursor pointer
                  .active
                    font-size 14px
                    color rgba(24, 144, 254, 1)
                    font-weight 600
    .contentRight
        flex 1
        padding 20px 30px 10px 30px
        background-color #fff
        overflow-y scroll 
        overflow-x hidden
.bgimg
  width: 200px;
  height: 128px;
.imgAndMsg
  width: 98%;
.navImg
 width: 98%;
</style>
